<template>

	<div class="page">
		<!--<div class="header">· 会员中心 ·</div>-->
		<div class="header-img">
			<div class="member-info">
				<img :src="user.headPortrait" />
				<div class="info">
					<div class="name">{{user.cnName}}</div>
					<div class="mobile">手机号：{{user.mobile}}</div>

				</div>
			</div>
			<div class="member-red-package">
				<div class="member-red-package-item">
					<i class="icon-color iconfont icon-single"></i>
					<span>剩余次数</span>
					<span class="num" style="font-size: 16px;">{{times}}</span>
				</div>
			</div>
		</div>
		<div v-show="message != ''">
			<div style="padding: 10px;">本次消费提示：{{user.cnName}} 于{{message}} 成功消费一次</div>
		</div>
		<mt-button type="default" style="color: white;width: 80%;margin-left: 10%;background-color: #00873b;height: 30px;font-size: 14px;margin-top: 50%;" @click="consume()">本次消费一次</mt-button>
	</div>
</template>

<style>
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	import { MessageBox } from 'mint-ui';
	export default {
		name: 'register',
		data: function() {
			return {
				items: [],
				openId: null,
				user: {},
				redPackageAndIntegrals: {
					consume: {
						accessRedpacket: 0
					},
					sumIntegral: 0
				},
				times: 0,
				message:''
			}
		},
		created() {
			document.title = '会员中心'
			this.openId = this.utils.getQueryString('openId') || '';
			if(this.utils.state == 'tony') {
				this.items = [
					//				{
					//					title:'我参与的活动',
					//					to:'/activities'+'/',
					//					icon:'icon-tubiao-',
					//					type:'activity'
					//				},{
					//					title:'我参与的娱乐活动',
					//					to:'/activities'+'/',
					//					icon:'icon-tubiao-',
					//					type:'activity'
					//				},{
					//					title:'我参与的旅游活动',
					//					to:'/activities'+'/',
					//					icon:'icon-tubiao-',
					//					type:'activity'
					//				},
					{
						title: '我的红包',
						to: '/member-center/redpackage',
						icon: 'icon-hongbao',
						type: 'redpackage'
					},
					{
						title: '我的积分',
						to: '/activities' + '/',
						icon: 'icon-jifen1',
						type: 'inter'
					},
					{
						title: '消费记录',
						to: '/activities' + '/',
						icon: 'icon-single',
						type: 'consume'
					}
				]
			} else {
				this.items = [{
						title: '我参与的活动',
						to: '/activities' + '/',
						icon: 'icon-tubiao-',
						type: 'activity'
					},
					{
						title: '我的红包',
						to: '/member-center/redpackage',
						icon: 'icon-hongbao',
						type: 'redpackage'
					},
					{
						title: '我的积分',
						to: '/activities' + '/',
						icon: 'icon-jifen1',
						type: 'inter'
					},
					{
						title: '消费记录',
						to: '/activities' + '/',
						icon: 'icon-single',
						type: 'consume'
					}
				]
			}
			this.getData();
		},
		methods: {
			getData() {
				var _self = this;
				$.ajax({
					type: "post",
					contentType: 'application/json;charset=UTF-8',
					url: this.utils.rootUrl + "fashion/memberInfo",
					data: JSON.stringify({
						openId: _self.openId
					}),
					success: function(res) {
						_self.$Spin.hide();
						if(!res.data) {
							_self.$router.push({
								path: '/register/' + _self.openId
							});
							return;
						}
						_self.user = res.data;
						_self.getRedPackage(_self.user.mobile);
						_self.times = res.timesInfo.times;
					},
					error: function(e) {
						_self.$Spin.hide();
					}
				});
			},
			consume() {
				var _self = this;
				if(_self.times <= 0) {
					_self.$Message.info({
						content: '可用次数不足，请前往柜台购买次数！',
						duration: 60,
						closable: true
					});
				} else {
					_self.$Spin.show();
					$.ajax({
						type: "post",
						contentType: 'application/json;charset=UTF-8',
						url: this.utils.rootUrl + "gameTimer/timesConsume",
						data: JSON.stringify({
							openId: _self.openId
						}),
						success: function(res) {
							if(res.status == 200) {
								if(res.data == null) {
									_self.$Message.warning('可用次数不足，请前往柜台购买次数');
								} else {
									_self.$Message.info({
										content: '本次消费成功！',
										duration: 10,
										closable: true
									});
									_self.times = res.data.times;
									_self.message = res.consumeDate;
								}
							} else {
								_self.$Message.error('内部错误，前往柜台咨询');
							}
							_self.$Spin.hide();
						},
						error: function(e) {
							_self.$Spin.hide();
						}
					});
				}
			},
			getRedPackage(mobile) {
				var _self = this;
				$.ajax({
					type: "post",
					contentType: 'application/json;charset=UTF-8',
					url: this.utils.rootUrl + "vip/redPackageAndIntegralsNum/" + mobile,
					data: JSON.stringify({}),
					success: function(res) {
						_self.redPackageAndIntegrals = res.data;
					},
					error: function(e) {}
				});
			},
			detail(path, type) {
				if(type == 'consume') {
					this.$router.push({
						name: 'PurchaseHistory',
						params: {
							mobile: this.user.mobile
						}
					})
					return;
				}
				if(type == 'inter') {
					this.$router.push({
						name: 'memberCenterRedpackage',
						params: {
							mobile: this.user.mobile,
							type: 'inter'
						}
					})
					return;
				}
				if(type == 'redpackage') {
					this.$router.push({
						name: 'memberCenterRedpackage',
						params: {
							mobile: this.user.mobile,
							type: 'redPackage'
						}
					})
					return;
				}
				this.$router.push(path + this.utils.getQueryString('openId'));
			}
		}
	}
</script>